<template>
  <v-card>
    <v-layout row>
      <!-- 商品分类 -->
      <v-flex xs3>
        <v-card>
          <v-card-title>选择分类，查看规格参数模板：</v-card-title>
          <v-divider/>
          <v-tree url="/item/category/list"
                  :isEdit="false"
                  @handleClick="handleClick"
          />
        </v-card>
      </v-flex>
      <!-- 规格参数 -->
      <v-flex xs9 class="px-1">
        <v-card class="elevation-0" v-show="currentNode.id">
          <v-card-title v-if="!currentNode.path">
            请先选择一个分类
          </v-card-title>
          <v-breadcrumbs dense v-else>
            <v-icon slot="divider">chevron_right</v-icon>
            <v-breadcrumbs-item
              v-for="(item,i) in items"
              :key="i"
            >
              <span v-if="i === 2" @click="back">{{ item }}</span>
              <span v-else>{{ item }}</span>
            </v-breadcrumbs-item>
          </v-breadcrumbs>
          <v-divider/>
          <v-card-text>
            <spec-group :cid="currentNode.id" v-show="showGroup" @select="selectGroup"/>
            <spec-param :group="group" v-show="!showGroup" />
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-card>
</template>

<script>

  export default {
    name: "v-spec",
    data() {
      return {
        currentNode: {}, // 当前被选中的商品分类节点
        group:{}, // 被选中的分组
        showGroup:true, // 是否展示分组
      };
    },
    methods: {
      // 分类点击后的弹窗
      handleClick(node) {
        // 判断点击的节点是否是父节点（只有点击到叶子节点才会展示规格）
        if (!node.isParent) {
          // 把当前点击的节点记录下来
          this.currentNode = node;
          // 显示规格组
          this.showGroup = true;
          // 记录选中的规格组，默认为空
          this.group = {};
        }
      },
      selectGroup(group){
        // 记录选中的分组
        this.group = group;
        // 不再显示分组，而是显示规格参数
        this.showGroup = false;
      },
      back(){
        this.showGroup = true;
        this.group = {};
      }
    },
    components:{
      SpecGroup: () => import('./SpecGroup.vue'),
      SpecParam: () => import('./SpecParam.vue'),
    },
    computed:{
      items(){
        const items = this.currentNode.path;
        if(this.group.name){
          items[3] = this.group.name;
        }
        return items;
      }
    }
  };
</script>

<style scoped>
</style>
